import React, { Component } from 'react';
import { Input, Button } from 'sq-ui';
import { success } from '../../ui-components';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as surveyAction from '../../actions/survey.action';
import util from '../../util';
import cx from 'classnames';
import style from "./SurveyResponse.styl";
import moment from 'moment';

export default
@connect(({ survey }) => ({ survey }), dispatch => ({actions: bindActionCreators({ ...surveyAction }, dispatch)}))
class SurveyResponse extends Component {

  state = {
    surveyResponseVOs: [],
    surveyActivityId: null,
    success: false,
  };

  componentDidMount() {
    this.props.actions.fetchSurveyActivity();
  }

  componentWillUnmount() {
    this.props.actions.resetSurvey();
  }

  componentWillReceiveProps(props) {
    if (!this.props.survey.activity && props.survey.activity && !util.isNull(props.survey.activity.surveyResponseVOs)) {
      this.setState({
        surveyActivityId: props.survey.activity.surveyActivityId,
        surveyResponseVOs: props.survey.activity.surveyResponseVOs.map(s => {
          let response;
          if (s.surveyItemType == 1) response = 13;
          else if (s.surveyItemType == 2) response = 14;
          return {
            surveyResponseId: s.surveyResponseId,
            surveyItemId: s.surveyItemId,
            surveyItemType: s.surveyItemType,
            response,
            responseDetail: '',
          }
        }),
      });
    }
  }

  update(surveyResponseId, name, value) {
    this.setState({
      surveyResponseVOs: this.state.surveyResponseVOs.map(s => {
        if (s.surveyResponseId == surveyResponseId) {
          return {
            ...s,
            [name]: value,
          };
        }
        return s;
      })
    });
  }

  save = () => {
   /* const keys = Object.keys(this.refs);
    if (keys
      .filter(f => f.indexOf('validate') === 0)
      .some(k => {
        return this.refs[k].rectEl.validate();
      })) {*/
      this.props.actions.submitSurveyActivity(this.state, () => {
        success('提交成功!');
        this.setState({
          success: true,
        });
      });
   /* }*/
  };

  render() {
    const { success, surveyActivityId: id, surveyResponseVOs: arr } = this.state;
    if (success) return (
      <div>
        <div className={style.title}>匿名调研</div>
        <div className={style.success}>发送成功！感谢反馈.</div>
      </div>
    );
    const { activity } = this.props.survey;
    const { surveyActivityId, surveyResponseVOs } = activity || {};
    if (!activity) return null;
    if (activity && util.isNull(surveyResponseVOs)) return (
      <div>
        <div className={style.title}>匿名调研</div>
        <div className={style.empty}>当前没有等待您填写的问卷</div>
      </div>
    );
    if (util.isNull(arr)) return null;
    return (
      <div className={style.wrapper}>
        <div className={style.title}>匿名调研</div>
        <div className={style['write-time']}>发起时间：<span style={{color: "#7793b2", marginLeft: '11px'}}>{moment(+activity.createdTime).format('YYYY-MM-DD HH:MM')}</span></div>
        <div className={style['write-tip']}>请花一分钟时间完成如下问卷，调研完全匿名，没有任何人能看到你是谁</div>
        <div className={style.root}>
          {
            surveyResponseVOs.map((res, i) => {
              const { surveyItemType, surveyItemVO: item } = res;
              switch(surveyItemType) {
                // 10项选择
                case 1:
                  return (
                    <div key={i} className={style.item}>
                      <h2>{item.question}</h2>
                      <div className={style['low-high']}>
                        <span>{item.lowLabel}</span>
                        <span>{item.highLabel}</span>
                      </div>
                      <div className={style.circles}>
                      {
                        [1,1,1,1,1,1,1,1,1,1].map((v, j) => (
                          <div
                            key={j}
                            className={cx(style.circle, {
                              [style.active]: this.state.surveyResponseVOs[i].response == j+4,
                            })}
                            onClick={() => {
                              this.update(res.surveyResponseId, 'response', j+4);
                            }}
                          >{j+1}</div>
                        ))
                      }
                      </div>
                      {
                        item.description?
                        <div style={{
                          lineHheight: 1,
                          color: "#aaa",
                          fontSize: "12px",
                          marginTop: "10px",
                        }}>{item.description}</div>
                        : null
                      }
                      <input
                        className={style.input}
                        placeholder="补充说几句"
                        value={this.state.surveyResponseVOs[i].responseDetail}
                        onChange={(e) => {
                          this.update(res.surveyResponseId, 'responseDetail', e.target.value);
                        }}
                      />
                    </div>
                  );
                // 2项选择
                case 2:
                  return (
                    <div key={i} className={style.item}>
                      <h2>{item.question}</h2>
                      <div className={style.radio}>
                        <span>
                          <input
                            type="radio"
                            defaultValue="14"
                            name="aa"
                            checked={this.state.surveyResponseVOs[i].response == 14}
                            onChange={e => this.update(res.surveyResponseId, 'response', e.target.value)}
                          />
                          <label>{item.lowLabel}</label>
                        </span>
                        <span>
                          <input
                            name="aa"
                            type="radio"
                            defaultValue="15"
                            checked={this.state.surveyResponseVOs[i].response == 15}
                            onChange={e => this.update(res.surveyResponseId, 'response', e.target.value)}
                          />
                          <label>{item.highLabel}</label>
                        </span>
                      </div>
                      <input
                        className={style.input}
                        placeholder="补充说几句"
                        value={this.state.surveyResponseVOs[i].responseDetail}
                        onChange={(e) => {
                          this.update(res.surveyResponseId, 'responseDetail', e.target.value);
                        }}
                      />
                    </div>
                  );
                // 文字回答
                case 3: 
                  return (
                    <div key={i} className={style.item}>
                      <h2>{item.question}</h2>
                      <Input
                        style={{width: '420px', height: '120px'}}
                        multi
                        placeholder="补充描述"
                        value={this.state.surveyResponseVOs[i].response}
                        onChange={e => this.update(res.surveyResponseId, 'responseDetail', e.target.value)}
                        regex={v => v && v.trim()}
                        tip="必填"
                        ref={`validate-input-${i}`}
                      />
                    </div>
                  );
              }
            })
          }
        </div>
        <Button
          label="保存"
          blue
          style={{marginTop: '30px', width: '101px', height: '40px', float: 'right'}}
          onClick={this.save}
        />
      </div>
    );
  }
}
